<template>
   <div class="application-edit-test">
      <div class="application-edit-test__header bg-white">
         <div class="tree-title">测试接口</div>
         <div class="aet-form">
            <div class="aet-form-item">
               <div class="aet-form-item--label">接口中文名称</div>
               <div class="aet-form-item--text">{{ mergerRuleForm.apiName }}</div>
            </div>
            <!-- <div class="aet-form-item">
               <div class="aet-form-item--label">版本号</div>
               <div class="aet-form-item--text">{{ mergerRuleForm.version || '-' }}</div>
            </div> -->
            <div class="aet-form-item">
               <div class="aet-form-item--label">请求方式</div>
               <div class="aet-form-item--text">{{ mergerRuleForm.requestMethod }}</div>
            </div>
            <div class="aet-form-item">
               <div class="aet-form-item--label">API管理人</div>
               <div class="aet-form-item--text">{{ mergerRuleForm.creator || '-' }}</div>
            </div>
            <div class="aet-form-item">
               <div class="aet-form-item--label">接口描述</div>
               <div class="aet-form-item--text">{{ mergerRuleForm.remark }}</div>
            </div>
            <div class="aet-form-item">
               <div class="aet-form-item--label">数据来源</div>
               <div class="aet-form-item--text">{{ mergerRuleForm.source == 1 ? '数据仓库源表' : '自定义SQL数据集' }}</div>
            </div>
            <div class="aet-form-item">
               <div class="aet-form-item--label">数据仓库源表</div>
               <div class="aet-form-item--text">{{ formatSourceTable }}</div>
            </div>
            <div class="aet-form-item">
               <div class="aet-form-item--label">接口访问路径</div>
               <div class="aet-form-item--text">{{ mergerRuleForm.url + mergerRuleForm.endpoint }}</div>
            </div>
            <div class="aet-form-item" v-if="mergerRuleForm.source == 2">
               <div class="aet-form-item--label">SQL 语句</div>
               <div class="aet-form-item--text">{{ mergerRuleForm.sqlStatement }}</div>
            </div>
         </div>
      </div>
      <div class="application-edit-test__content bg-white">
         <div class="application-edit-test__content--toolbar">
            <application-edit-json-editor title="请求报文" readonly @validate="onValidateApi"></application-edit-json-editor>
            <application-edit-json-editor title="响应报文" v-model="jsonResult" readonly type="output"></application-edit-json-editor>
         </div>
      </div>
      <div class="application-edit-test__footer bg-white">
         <div class="application-edit-test__footer--remark">
            <div class="aet-form">
               <div class="aet-form-item column">
                  <div class="aet-form-item--label required">备注</div>
                  <div class="aet-form-item--text">
                     <el-input class="remark" type="textarea" v-model="mergerRuleForm.remark" placeholder="请输入备注" readonly :disabled="loading"></el-input>
                  </div>
               </div>
            </div>
         </div>
         <div class="application-edit-test__footer--toolbar">
            <el-button type="primary" @click="toPrev">上一步</el-button>
            <el-button :type="isValid ? 'success' : 'danger'" :disabled="!isValid" @click="submitForm">发布</el-button>
            <el-button @click="onCancel()">取消</el-button>
         </div>
      </div>

      <application-edit-publish-dialog v-model="dialogVisible" :form="mergerRuleForm"></application-edit-publish-dialog>
   </div>
</template>

<script>
import ApplicationEditJsonEditor from "@/views/service/application/components/ApplicationEditJsonEditor";
import ApplicationEditPublishDialog from "@/views/service/application/components/ApplicationEditPublishDialog"
import { invokeApi } from "@/api/dataService/pool"

export default {
   name: 'ApplicationEditTest',
   props: {
      form: {
         type: Object,
         default: () => {
               return {}
         }
      }
   },
   components: {
      ApplicationEditJsonEditor,
      ApplicationEditPublishDialog
   },
   data() {
      return {
         loading: false,
         isValid: false, // 是否已经测试通过
         dialogVisible: false,
         ruleForm: {
            pageNum: 1,
            pageSize: 30,
            remark: ''
         },
         jsonResult: '',
         // jsonResult: '{"data":[{"name":"API调用总次数","code":"API_INVOKE","data":[{"date":"2021-06-29","totalNum":0,"sort":13},{"date":"2021-06-30","totalNum":0,"sort":12},{"date":"2021-07-01","totalNum":0,"sort":11},{"date":"2021-07-02","totalNum":0,"sort":10},{"date":"2021-07-03","totalNum":0,"sort":9},{"date":"2021-07-04","totalNum":6,"sort":8},{"date":"2021-07-05","totalNum":10,"sort":7},{"date":"2021-07-06","totalNum":13,"sort":6},{"date":"2021-07-07","totalNum":7,"sort":5},{"date":"2021-07-08","totalNum":0,"sort":4},{"date":"2021-07-09","totalNum":0,"sort":3},{"date":"2021-07-10","totalNum":0,"sort":2},{"date":"2021-07-11","totalNum":0,"sort":1},{"date":"2021-07-12","totalNum":0,"sort":0}]},{"name":"API服务总个数","code":"API_RELEASE","data":[{"date":"2021-06-29","totalNum":0,"sort":13},{"date":"2021-06-30","totalNum":0,"sort":12},{"date":"2021-07-01","totalNum":0,"sort":11},{"date":"2021-07-02","totalNum":0,"sort":10},{"date":"2021-07-03","totalNum":0,"sort":9},{"date":"2021-07-04","totalNum":0,"sort":8},{"date":"2021-07-05","totalNum":0,"sort":7},{"date":"2021-07-06","totalNum":0,"sort":6},{"date":"2021-07-07","totalNum":0,"sort":5},{"date":"2021-07-08","totalNum":0,"sort":4},{"date":"2021-07-09","totalNum":0,"sort":3},{"date":"2021-07-10","totalNum":0,"sort":2},{"date":"2021-07-11","totalNum":0,"sort":1},{"date":"2021-07-12","totalNum":0,"sort":0}]},{"name":"API订阅总人数","code":"API_SUBSCRIBE","data":[{"date":"2021-06-29","totalNum":0,"sort":13},{"date":"2021-06-30","totalNum":0,"sort":12},{"date":"2021-07-01","totalNum":0,"sort":11},{"date":"2021-07-02","totalNum":0,"sort":10},{"date":"2021-07-03","totalNum":0,"sort":9},{"date":"2021-07-04","totalNum":0,"sort":8},{"date":"2021-07-05","totalNum":0,"sort":7},{"date":"2021-07-06","totalNum":0,"sort":6},{"date":"2021-07-07","totalNum":0,"sort":5},{"date":"2021-07-08","totalNum":0,"sort":4},{"date":"2021-07-09","totalNum":0,"sort":3},{"date":"2021-07-10","totalNum":0,"sort":2},{"date":"2021-07-11","totalNum":0,"sort":1},{"date":"2021-07-12","totalNum":0,"sort":0}]}]}'
      }
   },
   computed: {
      mergerRuleForm() {
         return Object.assign({}, this.ruleForm, this.form)
      },
      formatSourceTable() {
         let data = this.mergerRuleForm.table
         let table = data instanceof Array ? [] : JSON.parse(data);
         if (!table || !table.length) {
            return '-'
         }
         let str = ''
         for (let i = 0; i < table.length; i++) {
            const item = table[i];
            if (i > 0) str += ','
            str += `${item.tableName}`
         }
         return str
      }
   },
   methods: {
      submitForm() {
         if (!this.mergerRuleForm.remark.length) {
            this.$message.error('备注不能为空');
            return
         }
         
         this.dialogVisible = this.isValid
      },
      resetForm() {
         this.isValid = false
         this.jsonResult = ''
         this.ruleForm.remark = ''
      },
      toPrev() {
         this.$emit('prev', 1)
         this.resetForm()
      },
      onCancel() {
         this.$emit('cancel', 1)
         this.resetForm()
      },
      onValidateApi() {
         let params = {
            apiId: this.mergerRuleForm.apiBaseInfoId,
            invokeType: 1,
            requestParam: "{\"pageSize\":10,\"pageNum\":0}" // V1.1 固定参数
         }
         invokeApi(params).then(res => {
            this.jsonResult = JSON.stringify(res)
            if (res.code == 200) {
               // this.jsonResult = res.data.length ? JSON.stringify(res.data) : ''
               this.isValid = true
            }
         }).catch(() => {
            this.isValid = false
         })
      },
   }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/system/tree.scss";

.application-edit-test {
   .aet-form {
      &-item {
         padding: 4px;
         display: flex;
         align-items: flex-start;
         font-size: 14px;

         &.column {
            flex-direction: column;

            .aet-form-item--label {
               text-align: left;
               margin-bottom: 8px;
            }
         }

         &--label {
            width: 110px;
            padding-right: 12px;
            font-weight: bold;
            color: #000;
            flex-shrink: 0;
            text-align: right;

            &.required::before {
               content: "*";
               color: #ff4949;
               margin-right: 4px;
            }
         }

         &--text {
            width: 100%;
            flex: 1;
            padding-top: 2px;
         }
      }
   }

   &__header {
      padding: 20px;
   }

   &__content {
      margin-top: 8px;
      padding: 20px;

      &--toolbar {
         display: flex;

         & > div {
            flex: 1;

            &:first-child {
               margin-right: 16px;
            }
         }
      }
   }

   &__footer {
      padding: 0 20px 20px;

      &--remark {
         .el-textarea.remark {
            height: 100px;
         }

         ::v-deep textarea {
            height: 100%;
            resize: none;
         }
      }
      
      &--toolbar {
         margin-top: 22px;
      }
   }

   .tree-title {
      margin-top: 0;
   }
}
</style>